import Icon from '@ant-design/icons';
import { useSetState } from 'ahooks';
import { Drawer, Image } from 'antd';
import cn from 'classnames';
import dayjs from 'dayjs';
import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';

import CameraIcon from '@/components/icons/camera';
import ScreenIcon from '@/components/icons/fullscreen';
import VoiceIcon from '@/components/icons/voice';
import WindowIcon from '@/components/icons/window';
import Recorder from '@/components/recording';
import store from '@/store';

import type { RecorderState } from '../recorder';
import styles from './index.less';
interface State {
  selectedFunc: string;
  selectVisible: boolean;
  recorderStatus: RecorderState;
}
const Index = () => {
  const defaultState = {
    selectedFunc: 'fullScreen',
    recorderStatus: 'ready' as RecorderState,
    selectVisible: false
  };
  const [state, setState] = useSetState<State>(defaultState);
  const { selectVisible, selectedFunc, recorderStatus } = state;
  useEffect(() => {
    localStorage.setItem('startRecord', 'false');
    window.api.receptBroadcast((data) => {
      if (data.msg === 'startRecord') {
        console.log('开始录制');
        store.startRecord();
      }
    });

    window.api.onShotCut((data) => {
      // 监听快捷键操作
      if (data === 'pause') {
        setState({ recorderStatus: 'pause' });
        store.pauseRecord();
      }
      if (data === 'continue') {
        console.log('继续');
        setState({ recorderStatus: 'recording' });
        store.pauseRecord(true);
      }
      if (data === 'stop') {
        setState({ recorderStatus: 'ready' });
        store.stopRecord();
      }
    });
  }, []);
  const funcList = [
    {
      name: '全屏录制',
      key: 'fullScreen',
      icon: ScreenIcon,
      click: () => {
        store.fullScreen && store.setStore({ currentWindow: store.fullScreen });
        setState({ selectedFunc: 'fullScreen' });
      }
    },
    {
      name: '窗口录制',
      key: 'window',
      icon: WindowIcon,
      click: () => {
        setState({ selectVisible: true });
      }
    },
    {
      name: '摄像头录制',
      key: 'camera',
      icon: CameraIcon,
      click: () => {
        setState({ selectedFunc: 'camera' });
      }
    },
    {
      name: '声音录制',
      icon: VoiceIcon,
      key: 'voice',
      click: () => {
        setState({ selectedFunc: 'voice' });
      }
    }
  ];

  return (
    <div className={styles.content}>
      <div className={styles.funcList}>
        {funcList.map((func) => {
          return (
            <div
              key={func.key}
              className={selectedFunc === func.key ? styles.selectedFunc : ''}
              onClick={func.click}
            >
              <div className={styles.icon}>
                <Icon component={func.icon} />
              </div>
              {store.currentWindow?.id.includes('window') && func.key === 'window' ? (
                <img width="100%" src={store.currentWindow.thumbnail.toDataURL()} />
              ) : (
                func.name
              )}
            </div>
          );
        })}
      </div>
      <div className={styles.timeBar}>{dayjs.duration(store.recordTime).format('HH:mm:ss')}</div>
      <div className={styles.startRecorder}>
        <Recorder
          status={recorderStatus}
          onChange={(status) => {
            setState({ recorderStatus: status });
            if (status === 'start') {
              window.api.readyRecord();
            } else if (status === 'recording') {
              store.pauseRecord(true);
            } else if (status === 'pause') {
              console.log('暂停');
              store.pauseRecord();
            } else if (status === 'ready') {
              store.stopRecord();
            }
          }}
        />
      </div>
      <Drawer
        open={selectVisible}
        title="选择窗口"
        footer={null}
        style={{ position: 'absolute' }}
        destroyOnClose={true}
        placement={'top'}
        getContainer={document.getElementById('app-main') || document.body}
        onClose={() => setState({ selectVisible: false })}
      >
        <div className={styles.window}>
          {store.windowList.map((win) => {
            return (
              <div
                onClick={() => {
                  // setState({ selectedWindow: win });
                  store.setStore({ currentWindow: win });
                  store.createRecorder();
                  setState({ selectedFunc: 'window', selectVisible: false });
                }}
                key={win.id}
              >
                <div
                  className={cn(
                    styles.windowShotSnap
                    // selectedWindow.id === win.id && styles.selectedWindow
                  )}
                >
                  <Image src={win.thumbnail.toDataURL()} preview={false} />
                </div>

                <div className={styles.windowName}>{win.name}</div>
              </div>
            );
          })}
        </div>
      </Drawer>
      {/* <SelectScreen
        visible={selectVisible}
        onCancel={() => setState({ selectVisible: false })}
        onOk={(win) => {
          if (win.name) {
            store.setStore({ currentWindow: win });
            store.createRecorder();
            setState({ selectedFunc: 'window', selectVisible: false });
          }
        }}
      /> */}
    </div>
  );
};

export default observer(Index);
